<template>
    <el-dialog title="提示" :visible.sync="dialogVisible" @close="close" width="40%" >
        <el-form :rules="rules" :model="formData" ref="formDialog" label-width="150px" class="demo-dynamic">
            <el-form-item prop="groupName" :label="$t('finance.groupName')">
                <el-select v-model="formData.groupName">
                    <el-option v-for="item in groupNameList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('finance.showTime') + '(' + $t('common.day') + ')'" prop="showDayCount">
                <el-input v-model="formData.showDayCount"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close">{{$t('common.cancel')}}</el-button>
            <el-button type="primary" @click="submitForm('formDialog')">{{$t('common.submit')}}</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            rules: {
                groupName: [
                    { required: true, message: 'Please enter the group name', trigger: "blur", }
                ],
                showDayCount: [
                    { required: true, message: 'Please enter time conditions', trigger: "blur", },
                    {
                        pattern: /^[0-9]*[0-9][0-9]*$/,
                        message: 'Please enter right days', //'小数点前1~7位，小数点后1~2位的数字，如：200.00 , 0.12'
                        trigger: "blur",
                    },
                ]
            },
            dialogVisible: true,
            groupNameList:[],
            formData: {
                showDayCount: '',
                groupName: ''
            }
        };
    },
    created(){
        this.queryGroupForAdd()
    },
    methods: {
        close(){
            this.$emit('addGroupClose')
        },
        queryGroupForAdd(){
            this.$api.finance.kanaProductDivide.queryGroupForAdd().then(res => {
                let { status, error, data, msg } = res;
                if ("1" === status && "00000000" === error && data) {
                    this.groupNameList = data
                } else {
                    this.$message.error(msg);
                }
            }) 
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = this.formData;
                    this.$api.finance.kanaProductDivide.addGroup(params).then(res=>{
                        
                        const {status,error,data,msg} = res;
                        if ("1" === status && "00000000" === error && data) {
                            this.$emit('addGroupSuc')
                        }else{
                            this.$message.error(msg);
                        }
                    })
                } else {
                    return false;
                }
            });
        },
    }
};
</script>